<template>
  <div class='container'>
    <el-form ref='form' :model='filterForm'>
      <el-form-item>
        <el-button class='filter-item' type='primary' plain icon='el-icon-plus' @click='handleCreate' style='float: right;'>新增关注条件</el-button>
      </el-form-item>
    </el-form>
    <el-table :data='conditionList' v-loading="loading" border fit stripe style='width: 100%;'>
      <el-table-column prop='id' align='center' label='编号' width='0' v-if='false'></el-table-column>
      <el-table-column prop='name' align='center' label='重点关注名称'></el-table-column>
      <el-table-column prop='cont' align='center' min-width='100px' label='关注条件'></el-table-column>
      <el-table-column prop='type' align='center' label='条件关系'></el-table-column>
      <el-table-column prop='status' align='center' label='条件值'></el-table-column>
      <el-table-column align='center' label='操作'>
        <template slot-scope='scope'>
          <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>详情</el-button>
          <el-button size='mini' type='danger' @click='handleDelete(scope.$index, scope.row)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class='pagination-container'>
      <el-pagination
        background
        layout='total, prev, pager, next'
        :total='total'
        :page-count='count'
        :page-size='size'
        :current-page='pageCurrent'
        @current-change='handleCurrentChange'
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getConditionList, delConditionInfo } from '@/api/condition';

export default {
  name: 'Orderlist',
  data() {
    return {
      delID: -1,
      filterForm: {
        name: ''
      },
      conditionList: [],
      total: 0,
      count: 0,
      pageCurrent: 1,
      size: 20,
      loading: true
    };
  },
  watch: {
    $route(to, from) {
      console.log('Route ', to);
      var id = from;
      if (id.path == '/keySetting/keycreate') {
        this.getConditionList('1');
      }
    }
  },
  created() {
    var myInfo = JSON.parse(localStorage.getItem('UserInfo'));
    if (myInfo == "'{}'" || myInfo == '{}') {
      this.getConditionList('1');
    } else {
      this.getConditionList('1');
    }
  },
  methods: {
    // 当前的页码，改变时会触发
    handleCurrentChange: function(currentPage) {
      this.getConditionList(currentPage);
    },
    handleDelete(index, row) {
      let that = this;
      that.delID = row.id;
      this.$confirm('删除本条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          that.deletePost();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getConditionList('1');
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    deletePost() {
      let that = this;
      // this.deleteID = '';
      //删除一行商品
      delConditionInfo(that.delID)
        .then(data => {
          console('', data);
          that.$message({
            message: '删除重点条件数据成功！',
            type: 'success'
          });
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
      localStorage.setItem('condId', row.id);
      this.$router.push({
        path: '/keySetting/keycreate',
        query: { id: row.id,readOnly:'yes' }
      });
    },
    handleCreate() {
      if (localStorage.hasOwnProperty('condId')) {
        localStorage.removeItem('condId');
      }
      this.$router.push({
        path: '/keySetting/keycreate',
        query: { id: Math.random() }
      });
    },
    //初始化数据
    getConditionList(page) {
      let that = this;
      that.loading = true;
      getConditionList('', page)
        .then(data => {
          that.loading = false;
          var myData = data.data;
          console.log(myData);
          if (myData.length <= 0) {
            var lenth = this.conditionList.length;
            that.conditionList.splice(0, lenth);
          } else {
            lenth = this.conditionList.length;
            that.conditionList.splice(0, lenth);
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.id,
                name: i.conditionName,
                cont: '',
                type: '',
                status: ''
              };
              if (i.paramList.length > 0) {
                var paramList = i.paramList[0];
                map.cont = paramList.conditionParamName;
                if (paramList.conditionParamType == '1') {
                  map.type = '大于';
                } else if (paramList.conditionParamType == '2') {
                  map.type = '等于';
                } else {
                  map.type = '小于';
                }
                map.type=paramList.conditionParamTypeName;
                map.status = paramList.conditionParamNumName;
              }
              that.conditionList.push(map);
            }
            var pageData = data.page;
            that.total = pageData.resultCount;
            that.count = pageData.pageCount;
            that.pageCurrent = pageData.pageCurrent;
            that.size = pageData.pageLimit;
          }
        })
        .catch(function(error) {
          console.log(error);
          that.loading = false;
        });
    }
  }
};
</script>
<style>
</style>
